<template>
    <div class="snippet_container">
        <div class="snippet_main">
            <div class="top_area">
                <i class="el-icon-arrow-left"></i>
                <span class="return_operation" @click="returnOperation" style="cursor:pointer">返回</span>
                <span class="leftVertical_ine"></span>
                <span class="snippet_name">场景片段：</span>
                <span class="snippet_name">{{sceneSinppetName}}</span>
                <span style="display: inline-block; float:right">
                    <el-button  @click="reviewAction" type="primary" plain>同步至数据集</el-button>
                    <el-button  type="info" plain @click="saveData">保存</el-button>
                    <el-button  type="info" plain @click="deleteData">删除</el-button>
                </span>
            </div>
            <div class="main_area">
                <div class="video_area">
                    <video
                        :src="playbackUrl"
                        width='960'
                        controls="controls"
                        type="video/mp4"
                        loop
                        autoplay
                    ></video>
                </div>
                <div class="right_area">
                    <infoComponent 
                        info-title="片段详情"
                        :info-data="infoData"
                        isDescriptionTextAreaShow = "true"
                        isTagShow = "true"
                        :descri = "segmentDetailForm.remark"
                        :tag = "tag"
                        ref = "clipDetails"
                        info-width="33.75rem"
                    ></infoComponent>
                </div>
            </div>
            <!-- 标注下载记录 -->
            <div class="main_record" v-if="propid">
               <el-tabs v-model="activeName" style="margin-right:1.25rem;">
                  <el-tab-pane label="标注记录" name="first"><annotationRecords :id="propid"/></el-tab-pane>
                  <el-tab-pane label="下载记录" name="second"><annotationDownload :id="propid"/></el-tab-pane>
                </el-tabs>
             <div class="export">导出</div>
            </div>
        </div>
                  
        <!-- 审核弹框 -->
        <el-dialog
            title="同步至数据集"
            :visible.sync="reviewOperationDialogVisible"
            :show-close="false"
            width="25%"
            height="44%"
            >
             <span class="review_main">选择数据集:
               <el-select v-model="datasetValue" placeholder="dataset-1157">
                    <el-option v-for="(item,index) in allDataList" :key="index" :label="item.text" :value="item.value"></el-option>
               </el-select>
            </span>    
            <span slot="footer" class="review_footer">
                <el-button type="primary" plain @click="reviewOperationDialogVisible = false;examinationPassed();">是</el-button>
                <el-button type="info" plain @click="reviewOperationDialogVisible = false">否</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import infoComponent from '@/components/infoComponent/infoComponent'
import annotationDownload from '../../../../components/sceneComponent/annotationDownload.vue'
import annotationRecords from '../../../../components/sceneComponent/annotationRecords.vue'
export default {
    components: {
        infoComponent,annotationDownload,annotationRecords
    },
    data() {
        return {
            reviewOperationDialogVisible: false,
            playbackUrl: '',
            segmentDetailForm: {},
            sceneSinppetName: '',
            infoData: [],
            status: ['待审核','标注中','标注完成'],
            tag: [],
            activeName: 'first',
            allEventDefaultValue:'dataset-1157',
            allDataList:{},
            datasetValue: ''
        }
    },
    created() {
        let tempSceneData = window.sessionStorage.getItem('tempSceneData');
        if (tempSceneData) {
            this.segmentDetailForm = JSON.parse(tempSceneData);
        } else {
            this.segmentDetailForm = this.$route.query.data;
            window.sessionStorage.setItem('tempSceneData',JSON.stringify(this.segmentDetailForm));
        }
        this.playbackUrl = this.segmentDetailForm.playback_url;
        this.sceneSinppetName = this.segmentDetailForm.name;
        this.tag = this.segmentDetailForm.tag.split('|');
        this.setInfoComponent();
        this.taskData();
    },
    beforeDestroy(){
        window.sessionStorage.removeItem('tempSceneData');
    },
    computed:{
        propid(){
            return this.segmentDetailForm.id? this.segmentDetailForm.id: this.propid;
        }
    },
    methods: {
        // 返回上一级
        returnOperation() {
            this.$router.push({path:'/SceneData'});
        }, 
        translateForm(value) {
            if (value === 0) {
                value = '待审核'
            } else if (value === 1) {
                value = '标注中'
            } else if (value === 2) {
                value = '标注完成'
            }
        },
        // 点击审核通过按钮
        reviewAction() {
            this.reviewOperationDialogVisible = true;
        },
        taskData(){
           this.$url.get('data/train/dataset').then((res) => {
             this.allDataList= res.data.data.data_list.map((item) => {
              return {text:item.dataset_name,value:item.dataset_id};    
             });
             this.allNewdata= res.data.data.data_list
           });
        },
        examinationPassed() {
            this.$url.post('data/scene/review', {
                'id': this.segmentDetailForm.id,
                'dataset_id': this.datasetValue
            })
            .then(res => {
                if (res.status === 200) {
                    this.$message.success('同步数据集成功')
                } else {
                    this.$message.error('同步数据集失败')
                }
            })
        },
        // 点击保存按钮事件
        saveData(){
            let newTagList = JSON.parse(JSON.stringify(this.$refs.clipDetails.tagList));
            this.$url.put('data/scene/'+ this.segmentDetailForm.id, {
                'remark': this.$refs.clipDetails.description,
                'tag': newTagList,
            })
            .then(res => {
                if (res.status === 201) {                     
                    this.$message.success('保存成功')
                    this.segmentDetailForm.remark = this.$refs.clipDetails.description;
                    this.segmentDetailForm.tag = newTagList.join('|');
                    this.tag = newTagList;
                    window.sessionStorage.setItem('tempSceneData',JSON.stringify(this.segmentDetailForm));
                } else {
                    this.$message.error('保存失败!')
                }
            })
        },
        // 点击删除按钮事件
        deleteData(){
            this.$confirm('确定删除此数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$url.delete('data/scene/'+ this.segmentDetailForm.id)
                .then(res => {
                    if (res.status === 204) {
                        this.$message.success('删除数据成功')
                        this.returnOperation();
                    } else {
                        this.$message.error('删除数据失败')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 设置片段详情组件信息
        setInfoComponent() {
            this.infoData = [{
                label: '状态',
                value: this.status[this.segmentDetailForm.data_status]
            },{
                label: '时长',
                value: this.segmentDetailForm.duration
            },{
                label: '采集时间',
                value: this.segmentDetailForm.collect_time,
                isTime: true
            },{
                label: '创建时间',
                value: this.segmentDetailForm.create_time,
                isTime: true
            },{
                label: '审核人员',
                value: this.segmentDetailForm.user_review
            }]
        }
    },
}
</script>

<style lang="less">
.snippet_container {
    height: 100%;
    display: flex;
    margin: 0 30px 0 10px;
    .snippet_main {
        margin-top: 15px;
        .top_area {
            margin-bottom: 25px;
            .el-icon-arrow-left {
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 14px;
                color: #0a4cee;
            }
            .return_operation {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 14px;
                color: #0a4cee;
                margin-right: 10px;
            }
            .leftVertical_ine {
                display: inline-block;
                height: 12px;
                border-left: 1px solid #d8d7d7;
                margin: 0 10px -2px 0px;
            }
            .snippet_name {
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: Normal;
                font-size: 14px;
                color: #131416;
            }
            .el-button {
                padding: 8px 37px;
            }
        }
        .main_area {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .video_area {
                width: 960px;
                margin-right: 20px;
            }
            .el-form-item {
                margin-bottom: 4px;
                margin-left: 10px;
            }
        }
    }
    // 审核弹框样式
    .el-dialog__title {
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: Bold;
        font-size: 16px;
        color: #131416;
    }
    .el-dialog__body {
        padding: 14px 60px 20px 60px;
        .el-select{
            top: -10px;
            left: 10px;
        }
    }
    .el-dialog__footer {
        text-align: center;
        padding: 10px 0 30px 0;
    }
    .review_main {
        display: flex;
        padding: 10px 0;
        height: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        font-size: 12px;
        color: #131416;
    }
    .el-dropdown-link {
        position: relative;
        top: -8px;
        width: 200px;
        height: 34px;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        color: #333333;
        line-height: 34px;
        display: flex;
        margin-left: 20px;
        .el-dropdown-text{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 10px;
        }
        .el-icon--right {
            line-height: 34px;
            padding-left: 70px;
            color: #a1a1a1;
        }
      }
    .review_footer {
        .el-button {
            padding: 8px 93px;
        }
    }
    // 提交下载记录
    .main_record{
        display: flex;
        position: relative;
        width: 1520px;
        height: 378px;
        padding-top: 20px; 
        .export{
            width: 100px;
            height: 34px;
            text-align: center;
            border: 1px solid #E6E6E6;
            font-size: 14px;
            line-height: 40px;
            position: absolute;
            left:1416px;
        }
        .el-tabs__item.is-top{
            color: #808080;
        }
        .el-tabs__nav.is-top{
            margin-left: 40px;
        }
        .el-tabs__item.is-top.is-active,.el-tabs__item.is-top{
             font-size: 16px;
             font-weight: 700;
             font-family: Microsoft YaHei;
        }
        .el-tabs__item.is-top.is-active,.el-tabs__item.is-top:hover{
            color: #333333;
        }
        .el-tabs__active-bar{
            background-color: #333333 !important;
        }  
        .el-tabs__nav-wrap::after{
            height: 0px;
        }
    }
    
    //按钮样式
    .el-button.el-button--info.is-plain,.el-button.el-button--primary.is-plain {
        border-color: #e6e6e6;
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        text-align: CENTER;
        color: #131416;
        color: #15141C;
        border-radius: 2px;
        background-color: #fff;

        &:disabled {
            background-color: #F8F8F8;
            border: 1px solid #E6E6E6;
            color: #A1A1A1;

            &:hover {
                background-color: #F8F8F8;
                border: 1px solid #E6E6E6;
                color: #A1A1A1;
                box-shadow: none;
            }
        }
    }
    .el-button.el-button--primary.is-plain {
        background-color: #0a4cee;
        border-color: #0a4cee;
        color: #fff;
        &:hover {
            box-shadow: 0 2px 8px 0 rgba(10, 76, 238, .5);
        }
    }

    .el-button.el-button--info.is-plain:hover {
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: Normal;
        font-size: 12px;
        box-shadow: 0 2px 8px 0 rgba(230, 230, 230, .5);
    }

    .el-button--info.is-plain:focus,
    .el-button--info.is-plain:hover {
        background: none;
    }
}
</style>